<template>
  <div class="content myOss" style="width:100%">
    <el-upload action :http-request="Upload" :before-upload="beforeAvatarUpload" :on-preview="handlePreview"
      :before-remove="beforeRemove" :on-remove="handleRemove" :on-success="handleSuccess" :on-exceed="handleExceed" drag
      :limit="limit" :file-list="fileList" :show-file-list="true" multiple style="w
      100%">
      <i class="el-icon-upload"></i>
      <div class="el-upload__text">
        将视频拖到此处，或
        <em>点击上传</em>
      </div>
      <!-- <div slot="tip" class="el-upload__tip">上传文件大小不能超过 1G</div> -->
    </el-upload>

    <!-- 若果是多个现在可以选择，但是需要调整删除的逻辑 -->
    <div v-for="(item, index) in multiplyFileList" :key="index" v-if="item.showProgress">
      <text></text>
      <el-progress :percentage="item.progress" status="success" :show-text="false" :stroke-width="5"></el-progress>
      <!-- <i class="el-icon-circle-check" style="color: #67C23A;"></i> -->
    </div>
  </div>
</template>


<script>
import { client, getFileNameUUID } from "../../common/js/utils/myOss"; //前面的ali-js文件内的两个封装函
export default {
  name: "Upload",
  props: {
    limit: {
      type: Number,
      default: 1
    }
  },
  data() {
    return {
      fileList: [],//文件列
      showProgress: false,//进度条的显示
      dataObj: {}, //存签名信息
      progress: 0, //进度条数据,
      multiplyFileList: [],
    };
  },
  methods: {
    // 文件超出个数限制时的钩子
    handleExceed(files, fileList) {
      this.$message.warning(`每次只能上传 ${this.limit} 个文件`);
    },
    // 点击文件列表中已上传的文件时的钩子
    handlePreview(file) { },
    // 删除文件之前的钩子
    beforeRemove(file, fileList) {
      return this.$confirm(`确定移除 ${file.name}？`);
    },
    // 文件列表移除文件时的钩子
    handleRemove(file, fileList) { },
    // 文件上传成功时的钩子
    handleSuccess(response, file, fileList) {
      this.fileList = fileList;
    },
    //文件上传前的校验
    beforeAvatarUpload(file) {
      const isLt100M =
        file.size / 1024 / 2 > 10 && file.size / 1024 / 1024 < 1024;
      const isLt30 = file.name.length < 30;
      if (["video/mp4"].indexOf(file.type) == -1) {
        this.$message.error("请上传正确的视频格式");
        return false;
      }
      if (!isLt100M) {
        this.$message.error("上传视频大小要在10MB~1GB之间哦!");
        return false;
      }
      if (!isLt30) {
        this.$message.error("上传视频文件名称长度必须要小于30个文字哦!");
        return false;
      }

      // 这是我的
      // this.dataObj = {
      //   region: 'oss-cn-beijing',
      //   accessKeyId: 'LTAI5tABNwt6cYgRsLrXJWFK',
      //   accessKeySecret: "wQtRrYHue1JTuPizNpJbZBWl5vuOTg",
      //   bucket: 'cmx-wechet-movie'
      // }

      // 这是nddk 的
      this.dataObj = {region:"oss-cn-beijing",accessKeyId:"LTAI5tRTAm6YPKRMPZMvr1Wa",accessKeySecret:"7H4jKkXoKEqodY7f6wJUaga0dUYI6H",bucket:"nddk-wechet-movie"}
      // 请求后台接口拿配置参数
      // return new Promise((resolve, reject) => {
      //   getAliOSSConfig()
      //     .then(response => {
      //       this.dataObj = response.data; //接口返回配置参数
      //       console.log(response.data);
      //       resolve(true);
      //     })
      //     .catch(err => {
      //       console.log(err);
      //       reject(false);
      //     });
      // });
    },
    // http-request属性来覆盖默认的上传行为（即action="url"），自定义上传的实现 
    Upload(file) {
      const that = this;
      async function multipartUpload() {
        let temporary = file.file.name.lastIndexOf(".");
        let fileNameLength = file.file.name.length;
        let fileFormat = file.file.name.substring(
          temporary + 1,
          fileNameLength
        );
        let fileName = getFileNameUUID() + "." + fileFormat;
        that.multiplyFileList.push({
          name: fileName,
          showProgress: true,
          reqUrl: '',
          progress: 0
        })

        console.log("that.multiplyFileList", that.multiplyFileList)
        client()
          .multipartUpload(`${fileName}`, file.file, {
            progress: function (p) {
              //p进度条的值
              console.log(p);
              console.log("fileName", fileName)
              that.showProgress = true;
              that.progress = Math.floor(p * 100);
              let item = that.multiplyFileList.find(item => item.name == fileName)
              item.progress = Math.floor(p * 100)
            }
          })
          .then(result => {
            //上传成功返回值，可针对项目需求写其他逻辑
            console.log(result);
            that.$emit('ossUpLoadSuccess', result)
          })
          .catch(err => {
            console.log("err:", err);
          });
      }
      multipartUpload();
    }
  }
};
</script>
